<template>
<div style="width: 90%;margin:auto;height: 90%;">
    <div style="width: 100%;margin:auto;height: 30%; display: flex;justify-content: space-around;align-items: center;">
        <div class="div1">
            <h1 style="font-size: 40px; color: rgb(170, 165, 165);">今日售出</h1>
            <hr>
            <p style="color: rgba(23, 193, 235, 0.888);font-size: 40px;">￥1300</p>
        </div>
        <div class="div1">
            <h1 style="font-size: 40px; color: rgb(170, 165, 165);">本月售出</h1>
            <hr>
            <p style="color: rgba(23, 193, 235, 0.888);font-size: 40px;">￥3305</p>
        </div>
        <div class="div1">
            <h1 style="font-size: 40px;color: rgb(170, 165, 165);">本季售出</h1>
            <hr>
            <p style="color: rgba(23, 193, 235, 0.888);font-size: 40px;">￥6301</p>
        </div>
        <div class="div1">
            <h1 style="font-size: 40px;color: rgb(170, 165, 165);">总售出</h1>
            <hr>
            <p style="color: rgba(23, 193, 235, 0.888);font-size: 40px;">￥10906</p>
        </div>
    </div>
     <div style="width: 1178px;margin:auto;height: 70%;display: flex;   box-shadow: 0px 0px 10px ; ">
        <div id="main" style="width: 428px;height: 100%;background-color: #fff; ">
        </div>
        <div id="main1" style="width: 750px;height: 100%;background-color: #fff; ">
        </div>
    </div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data(){
return{
}
},
mounted(){
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));
 var option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: false,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 180],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 10906, name: '总售出' },
        { value: 6301, name: '本季售出' },
        { value: 3305, name: '本月售出' },
        { value: 1300, name: '今日售出' },
      ]
    }
  ]
};
var option1 = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['每日的订单', '取消的订单', '每日成交量', '每日线下销量']
  },
  toolbox: {
    show: false,
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周七']
    }
  ],
  yAxis: [
    {
      type: 'value',
    }
  ],
  series: [
    {
      name: '每日的订单',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      name: '取消的订单',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '每日成交量',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '每日线下销量',
      type: 'line',
      stack: 'Total',
      label: {
        // show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [520, 632, 701, 734, 990, 1100, 1120]
    }
  ]
};
    myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
myChart.setOption(option);
myChart1.setOption(option1);

},
created(){

},
computed:{
},
methods:{
},
}
</script>
<style lang='less' scoped>
.div1{
    width: 200px;
    height: 100px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(23, 193, 235, 0.5);
}
</style>
